<link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>



<!--https://element.eleme.cn/#/zh-CN/component/message-box -->
<div id="app15" style="font-size: 14px">
	<template>
		<el-button type="primary" @click="open" >内容窗</el-button>
	</template>
</div>

<script type="text/javascript">
	//组件初始化
	var Main = {
		methods: {
			open() {
				this.$prompt('请输入邮箱', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
					inputErrorMessage: '邮箱格式不正确'
		        }).then(({ value }) => {//点击确定后触发
		        	this.$message({
		        		type: 'success',
		        		message: '你的邮箱是: ' + value
		        	});
		        }).catch(() => {//点击取消后触发
		        	this.$message({
		        		type: 'info',
		        		message: '取消输入'
		        	});       
		        });
		    }
		}
	}
	var Ctor = Vue.extend(Main);
	new Ctor().$mount('#app15');
	//为演示，初始化一次点击事件
	$('.el-button').click();
</script>